$(function () {
  var layer = layui.layer;
  var form = layui.form;

  initCate();

  // 初始化富文本编辑器
  initEditor();

  // 定义加载文章分类的方法
  function initCate() {
    $.ajax({
      method: 'GET',
      url: '/my/article/cates',
      success: function (res) {
        if (res.status !== 0) {
          return layer.msg('初始化文章分类失败！')
        }
        // 调用模板引擎，渲染分类的下拉菜单
        var htmlStr = template('tpl-cate', res)
        $('[name=cate_id]').html(htmlStr)
        // 一定要记得调用 form.render() 方法
        form.render()
      }
    })
  }

  // 1. 初始化图片裁剪器
  var $image = $('#image');

  // 2. 裁剪选项
  var options = {
    aspectRatio: 400 / 280,
    preview: '.img-preview'
  }

  // 3. 初始化裁剪区域
  $image.cropper(options);

  // 为选择封面的按钮，绑定点击事件处理函数
  $('#btnChooseImage').on('click', function () {
    $('#coverFile').click()
  });

  // 监听 coverFile 的 change 事件，获取用户选择的文件列表

  $('#coverFile').on('change', function (e) {
    var files = e.target.files;
    if (files.length === 0) {
      return layer.msg('请选择文件上传')
    }

    // URL.createObjectURL是H5新增的转换地址的方法
    //该方法只能用在dom对象上，需要将Jquery转换为dom
    var newImgURL = URL.createObjectURL(files[0]);
    $image
      .cropper('destroy') // 销毁旧的裁剪区域
      .attr('src', newImgURL) // 重新设置图片路径
      .cropper(options) // 重新初始化裁剪区域
  });


  // 定义文章的默认发布状态
  var art_state = '已发布';

  // 若点击草稿按钮，绑定点击事件处理函数
  $('#btnSave2').on('click', function () {
    art_state = '草稿';
  })

  // 为表单绑定 submit 提交事件
  $('#form-pub').on('submit', function (e) {
    e.preventDefault()

    // formdata对象可以一次获取表单所有的内容
    //FormData只接收dom对象
    var fd = new FormData($(this)[0])

    // 将不属于该表单中的属性与属性值追加到fd中
    fd.append('state', art_state)

    $image
      .cropper('getCroppedCanvas', {
        width: 400,
        height: 280
      })
      //将字符串转换为二进制
      .toBlob(function (blob) {
        //blob为转换的图片的二进制字符
        fd.append('cover_img', blob)
        // 6. 发起 ajax 数据请求
        publishArticle(fd)
      })
  })

  // 定义一个发布文章的方法
  function publishArticle(fd) {
    $.ajax({
      method: 'POST',
      url: '/my/article/add',
      data: fd,
      // 注意：如果向服务器提交的是 FormData 格式的数据

      contentType: false,//禁止默认的转换字符串行为，即默认内容类型application/x-www-form-urlencoded
      processData: false,//异步发送这个数据
      success: function (res) {
        if (res.status !== 0) {
          return layer.msg('发布文章失败！')
        }
        layer.msg('发布文章成功！')
        // 发布文章成功后，跳转到文章列表页面
        location.href = "/article/art_list.html"
      }
    })
  }
})
